<template>
  <uv-tabs :list="list" lineColor="#3775F6" lineWidth="24" lineHeight="2"
           :activeStyle="{fontWeight: 'bold',color:'var(--uni-text-color-blue)'}"
           :itemStyle="{padding:`${padding}`,lineHeight:'44px',fontSize:'16px'}"
           :inactive-style="{color:'rgba(0,0,0,.9)'}"
           :scrollable="scrollable" :current="current"
           @click="changeTab"></uv-tabs>
</template>

<script setup>
import {ref,watchEffect} from "vue";
const props = defineProps({
  // 滑块数组
  list:{
    type:Array,
    default: () => []
  },
  //是否滑动
  scrollable:{
    type:Boolean,
    default:true,
  },
  //当前索引
  current:{
    type:[String,Number],
    default:0,
  },
})
const padding = ref('')
watchEffect(()=>{
  if(props.scrollable){
    padding.value = '0 30rpx'
  }else {
    padding.value = '0'
  }
})
const emits = defineEmits(['changeTab'])
let changeTab = (e)=>{
  emits('changeTab',e)
}
</script>

<style lang="scss" scoped>

</style>
